import { Button } from 'antd';
import React from 'react';
import './index.module.scss';
import { ButtonType } from 'antd/lib/button';
import { connect } from 'react-redux';

interface IProps {
	type?: ButtonType;
	onClick?: () => void;
	onMouseEnter?: () => void;
	onMouseLeave?: () => void;
	onFocus?: () => void;
	children?: React.ReactNode;
	label?: string;
	className?: string;	//	样式类名，目前有primary-transpanent，grey-transpanent, primary-color
	icon?: React.ReactNode;
	align?: 'horizontal' | 'vertical';	//horizontal: 水平   vertical：垂直
	disabled?: boolean;
	title?: string;
	authName?: string;
	btnAuth?: Array<any>;
	style?: Object
}

const BdhButton = ( props: IProps ) => {
	const { btnAuth, authName, style = {} } = props;

	return authName && !btnAuth.includes( authName ) ? null : (
		<Button
			style={ style }
			type={ props.type }
			onMouseEnter={ props.onMouseEnter }
			onMouseLeave={ props.onMouseLeave }
			onFocus={ props.onFocus }
			onClick={ props.onClick }
			className={ `bdh_button bdh_icon ${ props.className ? props.className : '' } ${ props.align === 'horizontal' ? 'btn-horizontal' : 'btn-vertical' }` }
			icon={ props.icon }
			disabled={ props.disabled }
			title={ props.title }>
			{ props.label }
		</Button>
	);
};


//	映射state到当前组件
const mapStateToProps = ( state ) => {
	return {
		btnAuth: state.btnAuth
	};
};

export default  connect( mapStateToProps )( BdhButton );
